<template>
  <div class="gameInfoKXXXL_main">
    <div class="gameInfoKXXXL_pic"></div>

    <div class="gameInfoKXXXL_text">
      <span>游戏简介</span>
      <p>一天晚上，天空中掉下一颗神奇的豌豆种子，正好落在了梦之森林的村长屋附近，种子落地后吸收了池塘的水分，迅速成长，一夜之间变成参天大藤蔓…… 第二天早上，村民们醒来后看到巨大的藤蔓都惊呆了，聚在一起议论纷纷。有人说他似乎看到村长的房子在高耸入云的藤蔓上，房子似乎还在上升，有人号召说应该爬上去救村长，玩家需要爬到藤曼顶部救出村长。</p>
      <p>《开心消消乐》是一款乐元素研发的一款三消类休闲游戏。2013年8月，正式在网页版上线，2014年2月推出iOS版本 [15]  ，2014年4月推出Android版本 [19]  。</p>
    </div>


  </div>
  <div class="gameInfoKXXXL_main_2">
    <div class="gameInfoKXXXL_main_2_ad">
      <div class="gameInfoKXXXL_main_2_ad_title">
        <span>广告</span>&nbsp;<span id="close_ad" @click="close_adv">✖</span>
      </div>
      <video src="https://cloud.video.taobao.com//play/u/1621790841/p/1/e/6/t/1/390848881750.mp4" id="vdo" loop muted autoplay></video>
    </div>
    <div class="gameInfoKXXXL_main_2_start_button">开始游戏</div>
  </div>
</template>

<script>
export default {
  name: "gameInfoKXXXL",

  methods:{
    close_adv:function (){
      document.getElementById("vdo").style.visibility="hidden";
      document.getElementsByClassName("gameInfoKXXXL_main_2_ad_title")[0].style.visibility="hidden";
    }
  }
}

function cancle_mute_f(){
  alert(1);
}
</script>

<style scoped>

#close_ad{
  cursor: pointer;
  z-index: 500;
  display: inline-block;
  height: 20px;
}

.gameInfoKXXXL_main_2_ad_title{
  font-size: 14px;
  color: rgb(0,120,215);
  background-color: white;
  display: inline-block;
  padding-left: 3px;
  padding-right: 3px;
  position: absolute;
  right: 0;
}

.gameInfoKXXXL_main_2_ad>video{
  width: 800px;
  height: 200px;
}

.gameInfoKXXXL_main_2_ad{
  width: 800px;
  height: 200px;
  float: right;
  background-color: rgb(230,230,230);
  overflow: clip;
  border-radius: 3px;
}

.gameInfoKXXXL_main_2_start_button{
  width: 200px;
  height: 70px;
  border-radius: 10px;
  background-color: limegreen;
  font-size: 22px;
  text-align: center;
  line-height: 70px;
  color: white;
  transition: all 0.1s;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  left: 100px;
  top: 65px;
}

.gameInfoKXXXL_main_2_start_button:hover{
  background-color: #51e851;
}

.gameInfoKXXXL_main_2_start_button:active{
  scale: 97%;
}

.gameInfoKXXXL_text>span{
  font-weight: bold;
}

.gameInfoKXXXL_text>p{
  text-indent: 2em;

}

.gameInfoKXXXL_text{
  width: 800px;
  height: 475px;
  float: right;
  padding: 20px 20px;
  line-height: 28px;
  display: inline-block;
}

.gameInfoKXXXL_main{
  width: 1200px;
  height: 475px;
  /*background-color: wheat;*/
  border-radius: 15px;
  overflow: clip;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}

.gameInfoKXXXL_main_2{
  width: 1200px;
  height: 200px;
  /*background-color: wheat;*/
  border-radius: 15px;
  overflow: clip;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  margin-top: 30px;
  margin-bottom: 20px;
  overflow: clip;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
}

.gameInfoKXXXL_pic{
  height: 475px;
  width: 400px;
  display: inline-block;
  float: left;
  background-color: rgb(230,230,230);
  background-position: -40px;
  background-size: 700px;
  background-repeat: no-repeat;
  background-image: url("/src/assets/banner/3.jpg");
  border-radius: 10px;
}

</style>